import QtQuick 2.15
import QtQuick.Controls 2.15
import SutoDisplay 1.0

Item {
    width: 200
    height: 350
    id: bar_root
    property color pColor:"yellow"
    property color bgColor:"#00AB84"
    property color barColor:"#EA5523"
    property color valueLineBar:"#000000"
    property int barWidth:30
    property int barHeight:300

    property int valurResolution: 2
    property real maxValue: 100
    property real minValue: 0
    property real maxLimit: 80
    property real minLimit: 20
    property real currentValue: 30

    property string chName: "Flow"

    property int nameHeigh: 30
    property int nameSize: 20

    property int valueHeigh: 13
    property int valueSize: 13

    property bool isvalid: true

    /**该方法用来绘制一个有填充色的圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param width:矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param fillColor:填充颜色
     **/

    function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
        //圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) { return false; }

        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边
        drawRoundRectPath(cxt, width, height, radius);
        cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
        cxt.fill();
        cxt.restore();
    }


    /**该方法用来绘制圆角矩形
     *@param cxt:canvas的上下文环境
     *@param x:左上角x轴坐标
     *@param y:左上角y轴坐标
     *@param width:矩形的宽度
     *@param height:矩形的高度
     *@param radius:圆的半径
     *@param lineWidth:线条粗细
     *@param strokeColor:线条颜色
     **/
    function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
        //圆的直径必然要小于矩形的宽高
        if (2 * radius > width || 2 * radius > height) { return false; }

        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边
        drawRoundRectPath(cxt, width, height, radius);
        cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2
        cxt.strokeStyle = strokeColor || "#000";
        cxt.stroke();
        cxt.restore();
    }

    function drawRoundRectPath(cxt, width, height, radius) {
        cxt.beginPath(0);
        //从右下角顺时针绘制，弧度从0到1/2PI
        cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

        //矩形下边线
        cxt.lineTo(radius, height);

        //左下角圆弧，弧度从1/2PI到PI
        cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

        //矩形左边线
        cxt.lineTo(0, radius);

        //左上角圆弧，弧度从PI到3/2PI
        cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

        //上边线
        cxt.lineTo(width - radius, 0);

        //右上角圆弧
        cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

        //右边线
        cxt.lineTo(width, height - radius);
        cxt.closePath();
    }


    onMinLimitChanged: {//text属性信号处理
//            console.log("Text has changed to:", minLimit)
            c_bg1.requestPaint()
            c_bg2.requestPaint()
        }

    onMaxLimitChanged: {//text属性信号处理
//            console.log("Text has changed to:", minLimit)
            c_bg1.requestPaint()
            c_bg2.requestPaint()
        }

    onCurrentValueChanged: {//text属性信号处理
//            console.log("Text has changed to:", minLimit)
            c_bg1.requestPaint()
            c_bg2.requestPaint()
        }

    Rectangle {
        id: bar_container
        anchors.fill: parent

        Rectangle {
            id: bar_self

            width: barWidth+20
            height: parent.height - bar_name.height - bar_value.height-(valueHeigh*2)
            visible: true

            anchors.top: bar_value.bottom
            anchors.left: bar_minmax.right

            anchors.topMargin: valueHeigh


            Rectangle {
                id: bar_bg1
                anchors.fill: parent
                anchors.rightMargin: 0
                anchors.leftMargin: 0
                anchors.bottomMargin: 0
                anchors.topMargin: 0



                Canvas {
                    id: c_bg1
                    anchors.fill: parent

                    onPaint: {
                        var ctx = getContext("2d")

                        //                source-over	默认。在目标图像上显示源图像。
                        //                source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
                        //                source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
                        //                source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
                        //                destination-over	在源图像上方显示目标图像。
                        //                destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
                        //                destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
                        //                destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
                        //                lighter	显示源图像 + 目标图像。
                        //                copy	显示源图像。忽略目标图像。
                        //                xor	使用异或操作对源图像与目标图像进行组合。

                        //                ctx.fillStyle = "blue"

                        //                ctx.fillRect(50,
                        //                             50,
                        //                             width-100,
                        //                             height-100
                        //                             );
                        //               ctx.globalCompositeOperation="source-in"


                        ctx.strokeStyle = "blue"
                        ctx.fillStyle = bar_root.bgColor
                        ctx.fillRect(0,
                                     0,
                                     width,
                                     height);


                        ctx.fillStyle = bar_root.barColor
                        ctx.fillRect(0,
                                     0,
                                     width,
                                     height*(1 - (maxLimit/(maxValue-minValue)))
                                     );
                        ctx.fillRect(0,
                                     height*(1 - (minLimit/(maxValue-minValue))),
                                     width,
                                     height*(minLimit/(maxValue-minValue))
                                     );


                    }
                }




                Rectangle {
                    id: bar1
                    visible: true
                    color: "#00000000"
                    border.color: "#00000000"
                    border.width: 0
                    anchors.fill: parent
                    anchors.rightMargin: 0
                    anchors.leftMargin: 0
                    anchors.bottomMargin: 0
                    anchors.topMargin: 0




                    Canvas {
                        id: c_bg2
                        anchors.fill: parent;

                        onPaint: {
                            var ctx = getContext("2d");

                            ctx.fillStyle = pColor
                            ctx.fillRect(0,
                                         0,
                                         width+1,
                                         height);


                            ctx.globalCompositeOperation="source-in"
                            fillRoundRect(ctx,
                                          (width - barWidth)/2,
                                          0,
                                          barWidth,
                                          height,
                                          barWidth/2,
                                          /*optional*/ "#00000000")

                            ctx.globalCompositeOperation="source-over"
                            ctx.fillStyle = valueLineBar;           // 设置画笔属性
                             ctx.strokeStyle = valueLineBar;
                             ctx.lineWidth = 1

                             ctx.beginPath();                  // 开始一条路径
                             ctx.moveTo(4, (1-(currentValue/(maxValue-minValue)))*height);         // 移动到指定位置
                             ctx.arc(4,(1-(currentValue/(maxValue-minValue)))*height,2,0,Math.PI*2);

//                             ctx.lineTo(width-3, (1-(currentValue/(maxValue-minValue)))*height);

                             ctx.arc(width - 4,(1-(currentValue/(maxValue-minValue)))*height,2,0,Math.PI*2);

                             ctx.stroke();
                             ctx.fill();

                        }
                    }


                }
            }
        }

        Rectangle {
            id: bar_minmax
            width: (parent.width - barWidth-20)/2
            height:  parent.height - bar_name.height - bar_value.height+(valueHeigh/2)

            anchors.top: bar_value.bottom
            anchors.left: parent.left

            Text {
                id: maxv
                text: bar_root.maxValue.toFixed(valurResolution)
                font.pixelSize: valueSize
                height: valueHeigh
                y:+(valueHeigh/2)
                anchors.left: parent.left
                width: parent.width

                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                id: minv
                text:  bar_root.minValue.toFixed(valurResolution)
                font.pixelSize: valueSize
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                height: valueHeigh
                y : parent.height - (valueHeigh*2)
                anchors.left: parent.left
                width: parent.width
            }

        }

        Rectangle {
            id: bar_limit
            width: (parent.width - barWidth-20)/2
            height: parent.height - bar_name.height - bar_value.height

            anchors.right: parent.right
            anchors.top: bar_value.bottom
            anchors.bottom: bar_name.top

            Text {
                id: maxl
                x: 0
                y: (1-(maxLimit/(maxValue - minValue)))*(parent.height-(valueHeigh*2))+(valueHeigh/2)
                text:  bar_root.maxLimit.toFixed(valurResolution)
                font.pixelSize: valueSize
                height: valueHeigh
                width: parent.width
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                id: minl
                x: 0
                y: (1-(minLimit/(maxValue - minValue)))*(parent.height-(valueHeigh*2))+(valueHeigh/2)
                text:  bar_root.minLimit.toFixed(valurResolution)
                font.pixelSize: valueSize
                horizontalAlignment: Text.AlignLeft
                height: valueHeigh
                width: parent.width
                verticalAlignment: Text.AlignVCenter
            }
        }

        Rectangle {
            id: bar_name
            width: parent.width
            height: nameHeigh
            color: "#ffffff"

            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom : parent.bottom

            Text {
                id: text2
                text: chName
                anchors.fill: parent
                font.pixelSize: nameSize
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

        }

        Rectangle {
            id: bar_value
            height: nameHeigh
            color: "#ffffff"
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top

            Text {
                id: text1
                text: isvalid?currentValue.toFixed(valurResolution):"---.-"
                anchors.fill: parent
                font.pixelSize: nameSize
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    }





}

/*##^##
Designer {
    D{i:0;formeditorZoom:1.33}
}
##^##*/
